<template>
	<view class="">
		<view class="bj"></view>
		<!-- 标签切换 -->
		<view class="tabs">
			<u-tabs :list="tblist" bar-width="111" :is-scroll="false" :current="current" @change="change"
				inactive-color="#333333" active-color="#ff7200">
			</u-tabs>
		</view>
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="ordrnum">
				<view class="dingd">
					订单号：{{item.order_num}}
				</view>
				<view class="ds dfk" v-if="item.state==1">
					待付款
				</view>
				<view class="ds dfh" v-if="item.state==2">
					待发货
				</view>
				<view class="ds dsh" v-if="item.state==3">
					待收货
				</view>
				<view class="ds ywc" v-if="item.state==4">
					已完成
				</view>
			</view>
			<Modkeprodct :flag="flag" @orderxq="orderxq(item.id)" :arr="item.mallorder" :settlement_id="item.id"
				:state="item.state"></Modkeprodct>
			<view class="hr"></view>
			<view class="btnbox">
				<view class="fd">
					<view class="heji">
						共{{item.num}}件商品，合计：<text>{{item.money}}</text>
					</view>
				</view>
				<!-- <view class="finishbox" v-if="item.state==4">
					<view class="addbuy" @click="nowbuy(item.id)">
						再次购买
					</view>
				</view> -->
				<view class="finishbox" v-if="item.state==1" @click="quxiao(item.id)">
					<view class="qx">
						取消订单
					</view>
					<view class="ljgm" @click="nowbuy(item.id)">
						立即支付
					</view>
				</view>
				<view class="qr" v-if="item.state==3" @click="queren(item.id)">
					确认收货
				</view>
			</view>
			<view class="hrs"></view>
		</view>
		<view class="nolistbox">
			<u-empty text="暂无商品" mode="list" v-if="list.length==0"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getorderlist,
		confirmreceipt,
		cancelorder
	} from "../../api/api/index.js"
	import Modkeprodct from "../../components/Modkeprodct/index.vue"
	export default {
		data() {
			return {
				tblist: [{
					name: "全部"
				}, {
					name: "待付款"
				}, {
					name: "待发货"
				}, {
					name: "待收货"
				}, {
					name: "已完成"
				}],
				current: 0,
				flag: true,
				list: [],
				page: 0,
				limit: 3,
				flag: false,
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.page = 0
				this.flag = false
				this.list = []
				this.public()
			},
			orderxq(v) {
				this.jumpLink({
					link: "/pages/myorderxq/index",
					query: {
						id: v
					}
				})
			},
			// 查看评论
			lookremark() {
				this.jumpLink({
					link: "/pages/remarkxq/index"
				})
			},
			// 公共接口
			public() {
				if (this.flag) {
					return uni.showToast({
						title: "没有更多了",
						icon: "none",
						duration: 1000
					})
				}
				this.page++
				let data = {
					page: this.page,
					limit: this.limit,
					type: this.current
				}
				uni.showLoading({
					title: "加载中"
				})
				getorderlist(data).then(res => {
					uni.hideLoading()
					if (res.data.length < this.limit) {
						this.flag = true
					}
					this.list = this.list.concat(res.data)
				})
			},
			// 立即购买
			nowbuy(v) {
				this.jumpLink({
					link: "/pages/myorderxq/index",
					query: {
						id: v
					}
				})
				// uni.showLoading({
				// 	title: "载入中"
				// })
				// let that = this
				// let data = {
				// 	id: v,
				// 	type: "wechat_applet"
				// }
				// againpayorder(data).then(res => {
				// 	uni.hideLoading()
				// 	uni.requestPayment({
				// 		provider: 'wxpay',
				// 		timeStamp: res.data.timestamp,
				// 		nonceStr: res.data.noncestr,
				// 		package: res.data.package,
				// 		signType: 'MD5',
				// 		paySign: res.data.sign,
				// 		success: function(res) {
				// 			console.log('success: ' + JSON.stringify(res));
				// 			that.list = []
				// 			that.page = 0
				// 			that.flag = false
				// 			that.public()
				// 		},
				// 		fail: function(err) {
				// 			console.log('fail:' + JSON.stringify(err));
				// 		}
				// 	});
				// })
			},
			// 发布评论
			faburemark() {
				this.jumpLink({
					link: "/pages/issue_remark/index"
				})
			},
			// 确认收货
			queren(v) {
				uni.showLoading({
					title: "加载中"
				})
				confirmreceipt({
					id: v
				}).then(res => {
					uni.hideLoading()
					this.page = 0
					this.flag = false
					this.list = []
					this.public()
				})
			},
			// 取消订单
			quxiao(v) {
				uni.showLoading({
					title: "加载中"
				})
				cancelorder({
					id: v
				}).then(res => {
					uni.hideLoading()
					this.page = 0
					this.flag = false
					this.list = []
					this.public()
				})
			}
		},
		components: {
			Modkeprodct
		},
		onShow() {
			this.page = 0
			this.flag = false
			this.list = []
			this.public()
		},
		onLoad(e) {
			if (e.index == 0 || e.index == 1) {
				this.current = e.index
			} else {
				this.current = e.index * 1 + 1
			}
		},
		onReachBottom() {
			this.public()
		}
	}
</script>

<style scoped lang="scss">
	.bj {
		background-color: #F42121;
		height: 124rpx;
		width: 100%;
	}

	.tabs {
		position: absolute;
		left: 25rpx;
		top: 52rpx;
		width: 700rpx;
		border-radius: 100rpx;
	}

	.box {
		width: 700rpx;
		background-color: #FFFFFF;
		margin-left: 25rpx;

		.ordrnum {
			display: flex;
			justify-content: space-between;
			margin-left: 20rpx;
			padding-top: 42rpx;
			padding-bottom: 20rpx;
			font-size: 22rpx;
			box-sizing: border-box;

			.dingd {
				color: #666666;
			}

			.dsh {
				color: #4662b2;
			}

			.dfk {
				color: #FF9900;
			}

			.ywc {
				color: #999999;
			}

			.dfh {
				color: #FF3333;
			}

			.ds {
				margin-right: 31rpx;
			}
		}

		.hr {
			width: 678rpx;
			margin-left: 10rpx;
			height: 1rpx;
			background-color: #000000;
			opacity: 0.2;
			margin-top: 15rpx;
		}

		.btnbox {
			padding: 20rpx;
			box-sizing: border-box;
			align-items: center;
			display: flex;


			.finishbox {
				display: flex;
				justify-content: space-between;
				margin-left: 56rpx;

				.pj {
					width: 160rpx;
					height: 58rpx;
					background-color: #ffffff;
					border-radius: 29rpx;
					border: solid 2rpx #333333;
					line-height: 58rpx;
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					text-align: center;
					color: #282828;
				}

				.addbuy {
					width: 160rpx;
					height: 58rpx;
					background-color: #fff0eb;
					border-radius: 29rpx;
					border: solid 2rpx #ff6633;
					line-height: 58rpx;
					text-align: center;
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #ff6633;
					margin-left: 170rpx;
				}

				.qx {
					width: 160rpx;
					height: 58rpx;
					background-color: #e9e9e9;
					border-radius: 29rpx;
					line-height: 58rpx;
					text-align: center;
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #282828;
				}

				.ljgm {
					width: 160rpx;
					height: 58rpx;
					background-color: #ff8400;
					border-radius: 29rpx;
					line-height: 58rpx;
					text-align: center;
					font-family: MicrosoftYaHei;
					font-size: 24rpx;
					color: #ffffff;
					margin-left: 10rpx;
				}
			}

			.qr {
				width: 186rpx;
				height: 58rpx;
				background-color: #ff3333;
				border-radius: 29rpx;
				color: #ffffff;
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				line-height: 58rpx;
				text-align: center;
				font-family: MicrosoftYaHei;
				margin-left: 200rpx;
			}
		}

		.hrs {
			width: 100%;
			height: 21rpx;
			background-color: #DDDDDD;
		}

		.fd {
			.heji {
				font-family: MicrosoftYaHei;
				font-size: 24rpx;
				color: #333333;
				float: right;
				margin-right: 10rpx;

				text {
					color: #ff0000;
				}
			}
		}

		.fd::after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}

	}

	.nolistbox {
		margin: 80rpx auto;
	}
</style>
